var layer;
//页面渲染
var carouselBox = $('.carousel-container ');
//页面中的分割线
var num = 3;

var iDisplayStart =0;
//页面加载第一次是四条数据，点击右侧箭头时iDisplayLength=8，而iDisplayStart=4，
// 点击左侧箭头时若iDisplayLength=8而iDisplayStart=4，知道达到默认数据是给与提示不在进行点击
var iDisplayLength = 4;

var dataLitNow = 0;

var str = '';

var  resultLength;
$(function () {
    layui.use(['form', 'laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        queryEqInfo(iDisplayStart,iDisplayLength);
    });
    //点击右侧按钮
    $(".right").on("click",function () {
        iDisplayStart+=4;
        iDisplayLength += 4;
        queryEqInfo(iDisplayStart,iDisplayLength);
    })
    //点击左侧侧按钮
    $(".left").on("click",function () {
        iDisplayStart  -=4;
        iDisplayLength -= 4;
        if(iDisplayLength == 0){
            //请求失败时执行该函数
            layer.open({
                title: '错误',
                icon: 5,
                content: '请求数据小于0'
            });
            return;
        }else {
            queryEqInfo(iDisplayStart,iDisplayLength);
        }

    })
});
// 请求carousel数据,只加载天与周的数据
function queryEqInfo(iDisplayStart,iDisplayLength){
    // var param = getParam();
    var   loadingFlag1;
    $.ajax({
        type: "post",
        url:basePath + "equipment/getEqInfo.action" ,
        data:{"iDisplayStart":iDisplayStart,"iDisplayLength":iDisplayLength},
        dataType: "json",
        beforeSend: function (XMLHttpRequest) {
            //注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
            loadingFlag1= layer.msg('正在读取数据，请稍候……', { icon: 16, shade: 0.01,shadeClose:false,time:1000 });
        },
        success: function(data){
            carouselBox.empty();
            if(data.length > 0){
                var eqName="";//设备名称
                var collecTime="";//采集时间
                var code="";//设备编号
                var areaName="";//区域名称
                var province="";
                var listData=null;
                var dataName = [];
                var dataInitial = {};
                for (var i = 0; i <data.length ; i++) {
                    dataName = [];
                    eqName=data[i].eqName;
                    collecTime=data[i].collecTime;
                    code=data[i].code;
                    areaName=data[i].areaName;
                    province=data[i].province;
                    listData=data[i].list;
                    $.each(listData, function(i,val){
                        dataName.push(listData[i]["name"]);
                        dataInitial[listData[i]["name"]] = listData[i]["value"];
                    });
                    renderHtml(dataName,dataInitial,eqName,collecTime,code,areaName,province);
                }

            }
        },
        error : function(){
            //请求失败时执行该函数
            layer.open({
                title: '错误',
                icon: 5,
                content: '请求数据失败!'
            });
        }
    });
}


// 页面渲染
function renderHtml(dataName,data,eqName,collecTime,code,areaName,province){
    // var carouselBox = $('.carousel-main');
    var len = data.length;
    var str = '';
    var carouselBaseParams = {
        "温度": [basePath + "images/environment/wendu.png", "#ff6262"],
        "湿度": [basePath + "images/environment/shidu.png", "#3c81f1"],
        "露点": [basePath + "images/environment/ludian.png", "#2edfe1"],
        "光照": [basePath + "images/environment/guangzhaodu.png", "#f0631e"],
        "蒸发量": [basePath + "images/environment/zhengfaliang.png", "#4caffc"],
        "风向": [basePath + "images/environment/fengxiang.png", "#e96249"],
        "风速": [basePath + "images/environment/fengsu.png", "#7c73f2"],
        "光合": [basePath + "images/environment/gzfs.png", "#ffd051"],
        "雨量": [basePath + "images/environment/jiangyuliang.png", "#00b4f7"],
        "气压": [basePath + "images/environment/daqiya.png", "#b47df8"],
        "Co2": [basePath + "images/environment/c02.png", "#47cafb"],
        "PM2.5": [basePath + "images/environment/PM.png", "#fea356"],
        "氨气": [basePath + "images/environment/anqi.png", "#41ecb8"],
        "紫外辐射": [basePath + "images/environment/zwfs.png", "#daa4f4"],
        "总辐射": [basePath + "images/environment/zongfushe.png", "#5ad3ae"],
        "雨雪": [basePath + "images/environment/yuxue.png", "#30dfff"],
        "日照": [basePath + "images/environment/rizhao.png", "#ff3f19"],
        "PH（玻璃电极）": [basePath + "images/environment/PHqx.png", "#ffee2f"],
        "臭氧": [basePath + "images/environment/qitaTQ.png", "#47cafb"],
        "PM10": [basePath + "images/environment/qitaTQ.png", "#fea356"],
        "SO2": [basePath + "images/environment/eyhl.png", "#41ecb8"],
        "NO2": [basePath + "images/environment/qitaTQ.png", "#daa4f4"],
        "CO": [basePath + "images/environment/qitaTQ.png", "#5ad3ae"],
        "噪音": [basePath + "images/environment/qitaTQ.png", "#30dfff"],
        "负氧离子": [basePath + "images/environment/qitaTQ.png", "#ff3f19"],
        "其他": [basePath + "images/environment/qitaTQ.png", "#ff3091"],
    };
    var  dataNameLength=dataName.length;
    var carouselOptionParams = [];
    str+='<ul class="carousel-main swiper-wrapper" id="checkboxSingle" style="transform: translate3d(0px, 0px, 0px);">';
    str+= '<li id="firstLi"style="">';
    str+= ' <div class="atmosphere-modular" style="margin-top: 20px;margin-left: 15px;">';
    str+= ' <img src="'+basePath +'images/environment/province.png" alt="" height="20" width="20">';
    str+= ' <span>省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份：'+ province +'</span>';
    str+= '  </div>';
    str+= ' <div class="atmosphere-modular" style="margin-top: 15px;margin-left: 15px;">';
    str+= ' <img src="'+basePath +'images/environment/area.png" alt="" height="20" width="20">';
    str+= ' <span>区域名称：'+ areaName +'</span>';
    str+= '  </div>';
    str+= ' <div class="atmosphere-modular" style="margin-top: 15px;margin-left: 15px;">';
    str+= ' <img src="'+basePath +'images/environment/equipment.png" alt="" height="20" width="20">';
    str+= ' <span>设备名称：'+ eqName +'</span>';
    str+= '  </div>';
    str+= '<div class="atmosphere-modular" style="margin-top: 15px;margin-left: 15px;">';
    str+= ' <img src="'+basePath +'images/environment/number.png" alt="" height="20" width="20">';
    str+= '<span>设备编号：'+ code +'</span>';
    str+= '</div>';
    // str+= '<div class="atmosphere-modular"  style="margin:10px;">';
    // str+= '<img src="'+basePath +'images/environment/time.png" alt="" height="20" width="20">';
    // str+= '<span>采集时间：'+ collecTime +'</span>';
    // str+=' </div>';
    str +='</li>';
    str +='<li class="secondList" style="width:83%;border: 1px solid rgba(0,0,0,0.25)">';
    if (dataNameLength <= 13){
        str+=' <ul  class="carousel-main swiper-wrapper" style="margin: 10px;">';
    }else if (dataNameLength > 13  || dataNameLength<=26) {
        str+=' <ul  class="" style="margin: 10px;width:1500px">';
    }


    $.each(carouselBaseParams, function(i,j){
        $.each(dataName, function(m,n){
            if(n.indexOf(i) !== -1){
                var initial = data[n];
                var  direction="";
                if(n == "风向"){
                    direction=windDirection(initial);
                }else{
                    direction= initial;
                }
                carouselOptionParams.push(n);
                if ( dataNameLength <= 13){
                    str += '<li class="" style="margin-top: 15px;margin-right: 28px;height: 80px;"><div class="carousel-img"><img src="'+ j[0] +'" alt="" height="80" width="80">';
                    str += '</div><p class="carousel-unit-name" style="text-align: center;">';
                    str += '<span>'+ n +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;color:#65C4BB;"><span>'+ direction +'</span></p></li>';
                }else  if (dataNameLength >13) {
                    str += '<li class="" style="margin-right: 28px;height: 80px;float: left;"><div class="carousel-img"><img src="'+ j[0] +'" alt="" height="50" width="80">';
                    str += '</div><p class="carousel-unit-name" style="text-align: center;">';
                    str += '<span>'+ n +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;color:#65C4BB;"><span >'+ direction +'</span></p></li>';
                }
            }
        });
    });

    if(carouselOptionParams.length > 0){
        var differArr = dataName.diff(carouselOptionParams);
        var differArrLen = differArr.length;
        for(var i = 0;i<differArrLen;i++){
            var initial = data[ differArr[i] ];
            if (dataNameLength == 13){//奇数行（页面渲染时加入边框）
                str += '<li class=""style="margin-top: 15px;margin-right: 28px;height: 80px;"><div class="carousel-img"><img src="'+basePath+'images/environment/qitaTQ.png" alt="" height="80" width="80">';
                str += '</div><p class="carousel-unit-name" style="text-align: center;" >';
                str += '<span>'+ differArr[i] +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;font-size: 18px;color:#65C4BB;"><span>'+ initial +'</span></p></li>';
            }else if (dataNameLength > 13){
                str += '<li class=""style="margin-right: 28px;height: 80px;float: left;"><div class="carousel-img"><img src="'+basePath+'images/environment/qitaTQ.png" alt="" height="50" width="80">';
                str += '</div><p class="carousel-unit-name" style="text-align: center;" >';
                str += '<span>'+ differArr[i] +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;color:#65C4BB;"><span>'+ initial +'</span></p></li>';
            }

        }
    }
    str +='</ul></li></ul>';
    //判断分割线是否加入
    // if (num) {
        str +='<div style="border: 1px solid  #14de89;margin-top: 7px;margin-bottom: 7px;width: 100%;"></div>';
    // }
    carouselBox.append(str);
}

// 选项轮播
function optionsCarsouel(){
    var prev = $('.left'),
        next = $('.right');
   var  mySwiper  = new Swiper('.swiper-container ', {
           direction: 'horizontal', //左右滑动
           autoplay:false,//true时为自动切换，false为手动切换
           loop: false,//loop设置为true。会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
           initialSlide :0,
           observer:true,//修改swiper自己或子元素时，自动初始化swiper
           observeParents:true,//修改swiper的父元素时，自动初始化swiper
           on: {
               click: function(){
                   dataLitNow +=scrollNow+4;
                   queryEqInfo(dataLitNow);
               }
           },
    });
}

// 数组的差
Array.prototype.diff = function(a) {
    return this.filter(function(i) {return a.indexOf(i) < 0;});
};

//风向转换
function windDirection(initial){
    var value = "北风";
    if ((initial >=337.5 && initial<360)||(initial >=0 && initial<22.5))
        value = "北风" ;
    if (initial >=22.5 && initial<67.5)
        value = "东北风" ;
    if (initial >=67.5 && initial<112.5)
        value = "东风" ;
    if (initial >=112.5 && initial<157.5)
        value = "东南风" ;
    if (initial >=157.5 && initial<202.5)
        value = "南风" ;
    if (initial >=202.5 && initial<247.5)
        value = "西南风" ;
    if (initial >=247.5 && initial<292.5)
        value = "西风" ;
    if (initial >=292.5 && initial<337.5)
        value = "西北风" ;
    return value;
}